<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
            <el-form-item label="申请单标题" prop="applyTitle">
                <el-input
                        v-model="queryParams.applyTitle"
                        placeholder="请输入申请单标题"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="申请单号" prop="purApplyId">
                <el-input
                        v-model="queryParams.purApplyId"
                        placeholder="请输入申请单号"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="发起人" prop="applyUser">
                <el-input
                        v-model="queryParams.applyUser"
                        placeholder="请输入发起人"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="发起人姓名" prop="applyUserName">
                <el-input
                        v-model="queryParams.applyUserName"
                        placeholder="请输入公司名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="所属部门" prop="deptName">
                <el-input
                        v-model="queryParams.deptName"
                        placeholder="请输入部门名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" border :data="applyBillList">
            <el-table-column label="申请单号" align="center" prop="purApplyId" width="120"/>
            <el-table-column label="标题" align="center" prop="applyTitle" :show-overflow-tooltip="true"/>
            <el-table-column label="申请人" align="center" prop="applyUser" :show-overflow-tooltip="true"/>
            <el-table-column label="申请人姓名" align="center" prop="applyUserName" width="100"/>
            <el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true"/>
            <el-table-column label="申请时间" align="center" prop="applyTime" width="160">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.applyTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="approvalStatus" :show-overflow-tooltip="true"/>
            <el-table-column label="当前环节" align="center" prop="taskName" :show-overflow-tooltip="true"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-circle-check"
                            @click="handleView(scope.row)"
                    >查看申请单
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleApproval(scope.row)"
                    >审批
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <modifyApplyBill
                :dialogFormVisible="modifyApplyBillVisible"
                :formData="formData"
                :view="viewFlag"
                @cancel="modifyApplyBillCancel">
        </modifyApplyBill>
        <el-dialog title="审批申请单" :visible.sync="open" width="650px" append-to-body>
            <el-form ref="elForm" :model="approvalFormData" :rules="rules" size="medium" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="申请单号" prop="purApplyId">
                            <el-input v-model="approvalFormData.purApplyId" show-word-limit readonly
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="申请标题" prop="applyTitle">
                            <el-input v-model="approvalFormData.applyTitle" show-word-limit readonly
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="申请人" prop="applyUser">
                            <el-input v-model="approvalFormData.applyUser" show-word-limit readonly
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="申请人姓名" prop="applyUserName">
                            <el-input v-model="approvalFormData.applyUserName" show-word-limit readonly
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="申请时间" prop="applyTime">
                            <el-input v-model="approvalFormData.applyTime" show-word-limit readonly
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="所属部门" prop="deptName">
                            <el-input v-model="approvalFormData.deptName" show-word-limit readonly
                                      :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="审批" prop="approval">
                            <el-radio-group v-model="approvalFormData.approval" size="medium">
                                <el-radio v-for="item in approvalFormData.approvalTypeArr" :label="item">{{item}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="批注" prop="approvalComment">
                            <el-input v-model="approvalFormData.approvalComment" type="textarea" placeholder="请输入审批意见"
                                      show-word-limit
                                      :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitApproval">提交</el-button>
                <el-button @click="cancelApproval">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {listTodoPurApply,queryGoodsBillAndUserInfo,approvalApply} from "@/api/purchase/apply.js";
    import {getApprovalType} from "@/api/process/general.js";

    import modifyApplyBill from "@/views/purchase/apply/modifyApplyBill";

    export default {
        name: "listTodoPurApply",
        components: {modifyApplyBill},
        data() {
            return {
                // 遮罩层
                loading: true,
                // 申请单表格数据
                applyBillList: [],
                // 查询参数
                queryParams: {
                    applyTitle: undefined,
                    applyUser: undefined,
                    applyUserName: undefined,
                    deptName: undefined,
                    purApplyId: undefined
                },
                modifyApplyBillVisible: false,
                formData: undefined,
                viewFlag: false,
                open: false,
                approvalFormData: {},
                rules: {
                    approvalComment: [{
                        required: true,
                        message: '审批意见不能为空',
                        trigger: 'blur'
                    }]
                },
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 查询仓库列表 */
            getList() {
                this.loading = true;
                listTodoPurApply(this.queryParams).then(response => {
                    this.applyBillList = response.data;
                    this.loading = false;
                });
            },
            /** 查询按钮操作 */
            handleQuery() {
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            handleApproval(row){
                this.approvalFormData = row;
                let queryData = {
                    taskId: row.taskId
                };
                getApprovalType(queryData).then(response => {
                    let approvalTypeArr = response.data;
                    if(approvalTypeArr != null && approvalTypeArr.length>0){
                        this.$set(this.approvalFormData,'approvalTypeArr',approvalTypeArr);
                        this.$set(this.approvalFormData,'approval',approvalTypeArr[0]);
                    }

                });
                this.open = true;
            },
            /** 修改按钮操作 */
            handleView(row) {
                this.viewFlag = false;
                queryGoodsBillAndUserInfo(row).then(response => {
                    row.roles = response.data.roleNames;
                    row.posts = response.data.postNames;
                    row.purApplyGoodsBillVoList = response.data.purApplyGoodsBillList;
                });
                //this.formData = Object.assign({},row);
                this.formData = row;
                this.$set(this.formData,'purApplyId',row.purApplyId);
                this.$set(this.formData,'roles',row.roles);
                this.$set(this.formData,'posts',row.posts);
                this.$set(this.formData,'purApplyGoodsBillVoList',row.purApplyGoodsBillVoList);
                this.$set(this.formData,'deleteGoodsList',[]);
                this.modifyApplyBillVisible = true;
            },
            modifyApplyBillCancel(){
                this.getList();
                this.modifyApplyBillVisible = false
            },
            cancelApproval(){
                this.open = false;
                this.approvalFormData = {};
            },
            submitApproval(){
                console.log(this.approvalFormData);
                approvalApply(this.approvalFormData).then(response => {
                    if (response.code === 200) {
                        this.msgSuccess("采购申请单编号为："+this.approvalFormData.purApplyId +"的申请单审批成功!");
                        this.open = false;
                        this.getList();
                        this.approvalFormData = {};
                    } else {
                        this.msgError(response.msg);
                    }
                });

            }
        }
    };
</script>
